<template>
    <div class="admin">
        <div class="tanxin button">
            <p>筛选搜索</p>
            <div>
                <el-button @click="chongzhi">重置</el-button>
                <el-button @click="getTableData">查询搜索</el-button>
            </div>
        </div>
        <div class="input">
            <div class="input_div">
                <el-form-item label="商品名称">
                    <el-input v-model="keyword" placeholder="商品名称" class="el-input" type="text"></el-input>
                </el-form-item>
            </div>
            <div class="input_div">
                <el-form-item label="商品货号">
                    <el-input v-model="productSn" placeholder="商品货号" class="el-input" type="text"></el-input>
                </el-form-item>
            </div>
            <div class="input_div">
                <el-form-item label="商品分类">
                    <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
                </el-form-item>
            </div>
            <div class="input_div">
                <el-form-item label="商品品牌">
                    <el-select placeholder="商品品牌" v-model="brandId">
                        <el-option label="1111" value="1111" />
                        <el-option label="www" value="www" />
                        <el-option label="aaa" value="aaa" />
                        <el-option label="233" value="233" />
                        <el-option label="ttt" value="ttt" />
                        <el-option label="tt22" value="tt22" />
                        <el-option label="123" value="123" />
                        <el-option label="多发点" value="多发点" />
                        <el-option label="你是猪吗" value="你是猪吗" />
                    </el-select>
                </el-form-item>

            </div>
            <div class="input_div">
                <el-form-item label="上架状态">
                    <el-select placeholder="上架状态" v-model="publishStatus">
                        <el-option label="上架" value="0" />
                        <el-option label="下架" value="1" />
                    </el-select>
                </el-form-item>

            </div>
            <div class="input_div">
                <el-form-item label="审核状态">
                    <el-select placeholder="审核状态" v-model="verifyStatus">
                        <el-option label="审核通过" value="0" />
                        <el-option label="未审核" value="1" />
                    </el-select>
                </el-form-item>
            </div>

        </div>

    </div>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <el-button>添加</el-button>
    </div>
    <div class="table" :key="keyVal">
        <el-table ref="multipleTableRef" @select="selectall" :data="tableData" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="id" width="120" />
            <el-table-column label="商品图片" width="120">
                <template #default="scope">
                    <img :src="scope.row.pic" alt="">
                </template>
            </el-table-column>
            <el-table-column label="商品名称" show-overflow-tooltip>
                <template #default="scope">
                    <div>{{ scope.row.name }}</div>
                    <div>品牌：{{ scope.row.brandName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="价格/货号" show-overflow-tooltip>
                <template #default="scope">
                    <div>价格：{{ scope.row.price }}</div>
                    <div>货号：</div>
                </template>
            </el-table-column>
            <el-table-column width="100px" label="标签" show-overflow-tooltip>
                <template #default="scope">
                    <div>上架：
                        <el-switch @change="onupchange(scope.row.id, scope.row.publishStatus)"
                            :value="scope.row.publishStatus == 1 ? true : false" class="ml-2" />
                    </div>
                    <div>新品：
                        <el-switch @change="onnewStatus(scope.row.id, scope.row.newStatus)"
                            :value="scope.row.newStatus == 1 ? true : false" class="ml-2" />
                    </div>
                    <div>推荐：
                        <el-switch @change="onrecommandStatus(scope.row.id, scope.row.recommandStatus)"
                            :value="scope.row.recommandStatus == 1 ? true : false" class="ml-2" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" show-overflow-tooltip />
            <el-table-column property="address" label="SKU库存" show-overflow-tooltip>
                <template #default="scope">
                    <div @click="openmodo"
                        style="line-height: 40px; width: 40px;height: 40px;border-radius: 50%;background-color: #409eff;">
                        <el-icon size="18px" color="#fff">
                            <EditPen />
                        </el-icon>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="sale" label="销量" show-overflow-tooltip />
            <el-table-column property="address" label="审核状态" show-overflow-tooltip>
                <template #default="scope">
                    审核状态
                    <div>
                        <a style="color: #409eff;"> 审核详情</a>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="address" label="操作" show-overflow-tooltip>
                <template #default="scope">
                    <div class="tanxin">
                        <a @click="bianji">编辑</a>
                        <a @click="delet(scope.row.id)"> 删除</a>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="tanxin">

            <div class="tanxin">
                <el-select v-model="allchaoz" placeholder="批量操作">
                    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                    </el-option>
                </el-select>

                <el-button @click="allclick">确定</el-button>
            </div>
            <div>
                <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                    :page-sizes="[5, 10, 15, 20]" :small="small" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="编辑货品信息" width="60%" align-center>
        <div>
            <div>
                <el-form-item label="商品货号">
                    <el-input style="width: 50%;" v-model="keyword" placeholder="商品货号" type="text">
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
            </div>
            <div>
                <el-table empty-text="暂无数据" style="width: 100%">
                    <el-table-column label="SKU编号" width="350" />
                    <el-table-column label="Name" width="销售价格" />
                    <el-table-column label="商品库存" />
                    <el-table-column label="库存值预警" />
                </el-table>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="oncenterDialogVisible">
                    OK
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElTable } from 'element-plus'
import * as api from '../../request/api'
import type { IGoosOlldata } from '../../request/DYBApi/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import useTabel from '../../hooks/useGoods'
import { el } from 'element-plus/es/locale'
// 审核状态
let verifyStatus = ref()
// 上架状态
let publishStatus = ref()
// 商品品牌
let brandId = ref()
// 商品分类
let productCategoryId = ref()
const value = ref([])
const props = {
    expandTrigger: 'hover' as const,
}
const options = [
    {
        value: 'sdgsd',
        label: 'sdgsd',
        children: [
            {
                value: '96',
                label: '333',
            },
            {
                value: '100',
                label: '11',
            },
        ],
    },
    {
        value: '4',
        label: '4',
        children: [
            {
                value: '114',
                label: '42524532'
            }
        ],
    },
    {
        value: '22222',
        label: '22222',
        disabled: true,
        children: [
        ],
    },
]
const handleChange = (value: any) => {
    productCategoryId.value = value[1]
}
// 商品货号
let productSn = ref()
// 商品名称
let keyword = ref('')

interface User {
    date: string
    name: string
    address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()




// 重置按钮
let chongzhi = () => {
    publishStatus.value = ''
    verifyStatus.value = ''
    keyword.value = '',
        productSn.value = ''
    productCategoryId.value = ''
    brandId.value = ''
    getTableData()
}
// 上架 开关按钮
let onupchange = async (id: number, unm: number) => {
    if (unm === 0) {
        await api.yxadmin.uppublishStatus({ ids: id, publishStatus: 1 })
    } else {
        await api.yxadmin.uppublishStatus({ ids: id, publishStatus: 0 })
    }
    getTableData()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
// 新品开关
let onnewStatus = async (ids: number, newStatus: number) => {
    if (newStatus === 0) {
        await api.yxadmin.upnewStatus({ ids, newStatus: 1 })
    } else {
        await api.yxadmin.upnewStatus({ ids, newStatus: 0 })
    }
    getTableData()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
// 推荐开关
let onrecommandStatus = async (ids: number, recommendStatus: number) => {

    if (recommendStatus === 0) {
        await api.yxadmin.uprecommendStatus({ ids, recommendStatus: 1 })

    } else {
        await api.yxadmin.uprecommendStatus({ ids, recommendStatus: 0 })

    }
    getTableData()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
let centerDialogVisible = ref(false)

// 打开模态框
let openmodo = () => {
    centerDialogVisible.value = true
}
let oncenterDialogVisible = () => {
    ElMessage({
        type: 'warning',
        message: '暂无数据',
    })
    centerDialogVisible.value = false
}

const small = ref(false)


let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTabel(api.yxadmin.getGoodsList,
    {
        productCategoryId, verifyStatus,
        publishStatus, keyword, brandId, productSn
    })
getTableData()

// 编辑按钮
let bianji = () => {

}
// 点击删除
let delet = async (id: number) => {
    let arr = [id]
    await api.yxadmin.POStproductupdata({ ids: arr })
    getTableData()
}

let cities = ref([{
    value: 1,
    label: '商品上架'
}, {
    value: 2,
    label: '商品下架'
}, {
    value: 3,
    label: '设为推荐'
}, {
    value: 4,
    label: '取消推荐'
}, {
    value: 5,
    label: '设为新品'
}, {
    value: 6,
    label: '取消新品'
}, {
    value: 7,
    label: '转移到分类'
}, {
    value: 8,
    label: '移入回收站'
}])
let idssss = ref<number[]>([])
let idsssss = ref<number[]>([])
// 点击多项按钮的时候
let selectall = (selection: any) => {
    console.log(selection, 1);
    idssss.value = selection
    console.log(idssss.value);

}
// 多项操作
let allchaoz = ref()
// 批量操作确认
let allclick = async () => {

    if (idssss.value.length <= 5) {
        console.log(123);

    } else {
        console.log(312);
        console.log(idssss.value);

        idss.value = idssss.value
        console.log(idss.value);
    }
    console.log(idss.value);

    // 上架
    if (allchaoz.value === 1) {
        await api.yxadmin.uppublishStatus({ ids: idss.value, publishStatus: 1 })

    }
    // 下架
    if (allchaoz.value === 2) {
        await api.yxadmin.uppublishStatus({ ids: idss.value, publishStatus: 0 })

    }
    // 推荐
    if (allchaoz.value === 3) {
        await api.yxadmin.uprecommendStatus({ ids: idss.value, recommendStatus: 1 })

    }
    // 不推荐
    if (allchaoz.value === 4) {
        await api.yxadmin.uprecommendStatus({ ids: idss.value, recommendStatus: 0 })

    }
    // 设为新品
    if (allchaoz.value === 5) {
        await api.yxadmin.upnewStatus({ ids: idss.value, newStatus: 1 })

    }
    // 不为新品
    if (allchaoz.value === 6) {
        await api.yxadmin.upnewStatus({ ids: idss.value, newStatus: 0 })

    }
    // fenl
    if (allchaoz.value === 7) {


    }

    // 删除
    if (allchaoz.value === 8) {
        await api.yxadmin.POStproductupdata({ ids: idss.value, deleteStatus: 1 })

    }
    getTableData()
    keyVal.value++
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
let keyVal = ref(1)
let idss = ref<number[]>([])
// 单选  多选按钮
const handleSelectionChange = (val: any) => {


    if (val == '') {

        idss.value = []
    } else {
        val.forEach((item: any) => {
            idss.value.push(item.id)
        })
    }
    // idss.value = new Set(idss.value)
    console.log(idss.value);
}




</script>

<style scoped lang="scss">
.admin {
    margin: 20px;
    padding: 20px;
    padding-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    padding: 20px;
    box-sizing: border-box;

    .button {
        display: flex;
        align-items: center;
    }

    .input {
        margin-top: 20px;
        margin-left: 30px;
        font-size: 14px;
        align-items: center;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .input_div {
            width: 345px;
            margin-bottom: 10px;

        }

    }

    .el-input {
        margin-left: 10px;
        width: 168px;
        height: 30;
    }
}

.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.table {
    margin: 20px;
    border: 1px solid #eee;

    img {
        height: 80px;
    }

    :deep .el-tooltip {
        text-align: center !important;
    }
}
</style>